<template>
  <div class="person">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{age}}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>
  </div>
</template>

<script>
  export default {
    name: 'Person',
    setup() {
      // 数据
      let name = '桃子'
      let age = 23
      let tel = '13691750124'

      // 方法
      function changeName() {
        name = 'taozi'
      }
      function changeAge() {
        age += 1
      }
      function showTel() {
        alert(tel)
      }
      // return为代码结束，所以方法等需要写在这之上
      return {name,age,changeName,changeAge,showTel}
    }
  }
</script>

<style scoped>
    .person {
        background-color: skyblue;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }

    button {
      margin: 0 5px;
    }
</style>